import Vue from 'vue'
import Vuex from 'vuex'

/**
 * vue组件中，他有哪些功能？
 * 1. data: 存数据
 * 2. methods: 处理逻辑
 * 5. 生命周期（数据处理，dom操作，清除内存）（调用函数在哪个地方？created-div元素上 v-on）
 */

// 注册
Vue.use(Vuex)
// vuex可以解决兄弟组件通信
// 数据一般都跟逻辑结合在一起，
// 数据有两种类型：1.同步数据 2. 异步数据

/***
 * vuex的功能
 * 1. 存数据
 * 2. 处理逻辑
 * （vuex中的处理逻辑的函数，自己能不能调用？）
 * 没有模版元素，也没有生命周期（那他在哪儿调用？
 * 答案：vuex中的函数，也是在vue组件中调用，created/template）
 */

// 使用promise模拟一个异步数据 通过vuex解决

const createData = (msg) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        id: Date.now(),
        value: Date.now() + '-' + msg,
        count: 10,
        check: false,
      })
    }, 1000)
  })
}

export default new Vuex.Store({
  // 数据仓库
  state: {
    list: [
      {
        id: '1',
        value: '谈恋爱',
        count: 10,
        check: false,
      },
      {
        id: '2',
        value: '看电影',
        count: 1,
        check: false,
      },
    ],
    token: '123_admin',
  },
  // 同步逻辑处理地方（所有的逻辑最终都要通过他来处理）
  mutations: {
    // 第一个参数就是数据仓库，第二个参数，就是组件传递过来的参数
    change_value(state, payload) {
      console.log('payload:', payload)
      const todoItem = state.list.find((v) => v.id === payload.item.id)
      todoItem.value = todoItem.value + '-' + payload.who
      console.log('state:', state)
    },
    change_token(state, payload) {
      state.token = payload.token
    },
    add_list_item(state, payload) {
      console.log('add_list_item_payload:', payload)
      state.list.push(payload)
    },
  },
  // 获取异步数据的地方(函数调用在组件中的两个地方，生命周期，template元素上)
  actions: {
    // 需求：将异步数据 放在list中，渲染出来
    async getData({ commit }, { msg = '默认事件' }) {
      const response = await createData(msg)
      console.log('response:', response)
      // actions只负责处理异步，不负责处理逻辑，mutation
      // commit 负责将数据提交给mutaion中的函数，mutation中的函数，负责处理逻辑
      commit('add_list_item', response)
    },
  },
  // 类似于组件中computed计算属性
  // 需求：计算list数据中所有的count累加和
  getters: {
    // 谁来调用当前函数-()
    totalCount(state) {
      return state.list.reduce((num, item) => {
        return num + item.count
      }, 0)
    },
  },
  // 处理vuex模块化
  modules: {},
})
